// console.log(lrc)

/**
 *解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象{time:开始时间,words:歌词}
 */
function parseLrc () {
  let lines = lrc.split('\n')
  let result = []
  lines.map(item => {
    let parts = item.split(']')
    let timeStr = parts[0].substring(1)
    let obj = {
      time: parseTime(timeStr),
      words: parts[1]
    }
    result.push(obj)
  })
  return result
}

/**
 * 将一个时间字符串解析为数字（秒）
 * @param {String} timeStr 时间字符串
 * @returns
 */
function parseTime (timeStr) {
  let parts = timeStr.split(':')
  return +parts[0] * 60 + +parts[1]
}

var lrcData = parseLrc()
console.log(lrcData)

// 获取需要的 dom
var doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.container ul'),
  container: document.querySelector('.container')
}

/**
 * 计算出，在当前播放器播放到第几秒的情况下
 * lrcData数组中，应该高亮显示的歌词下标
 * 如果没有任何一句歌词需要显示，则得到-1
 * 注意这里不能使用map或者foreach循环，他们会完整执行
 * 整个遍历，不会在第一次有符合的值之后就退出循环，这样
 * 每次都会走到最后，得到的值都是一样的，都是最后一句歌词
 */
function findIndex () {
  let curTime = doms.audio.currentTime
  for (var i = 0; i < lrcData.length; i++) {
    if (curTime < lrcData[i].time) {
      return i - 1
    }
  }
  // 找遍了都没找到（说明播放到最后一句）
  return lrcData.length - 1
}

/**
 * 创建歌词元素 li
 */
function createLrcElements () {
  var frag = document.createDocumentFragment() // 文档片段
  lrcData.map(item => {
    let li = document.createElement('li')
    li.textContent = item.words
    frag.appendChild(li)
  })
  doms.ul.appendChild(frag)
}
createLrcElements()

// 容器高度
var containerHeight = doms.container.clientHeight
// 每个 li 的高度
var liHeight = doms.ul.children[0].clientHeight
// 最大偏移量
var maxOffset = doms.ul.clientHeight - containerHeight

// 设置ul偏移量
function setOffset () {
  let index = findIndex()
  let offset = liHeight * index + liHeight / 2 - containerHeight / 2
  if (offset < 0) {
    offset = 0
  }
  if (offset > maxOffset) {
    offset = maxOffset
  }
  doms.ul.style.transform = `translateY(-${offset}px)`
  // 去掉之前的 active 样式
  let li = doms.ul.querySelector('.active')
  if (li) {
    li.classList.remove('active')
  }

  li = doms.ul.children[index]
  if (li) {
    li.classList.add('active')
  }
}

doms.audio.addEventListener('timeupdate', setOffset);